<template>
	<view class="index">



        <view class="u_box" @click="$project.toPath('/pages/team/info')">
			<view class="bc">
				<view  class="xian"></view>
				<view>基本资料</view>
			</view>
			<view class="u_info">
				查看详情>
			</view>
		</view>

		<view class="head">

			<view class="h_left">

				<view class="h_one">
					<view class="">累计收益</view>
					<view class="yu">{{userInfo.lyu}}</view>
				</view>
				<view class="head">

					<view class="l_box">
						<view>
							<view>结算中</view>
							<view class="yu">{{userInfo.jsz}}</view>
						</view>
					</view>

					<view class="l_box">
						<view>已结算</view>
						<view class="yu">{{userInfo.tyu}}</view>
					</view>

					<view class="l_box">
						<view>未结算</view>
						<view class="yu">{{userInfo.yu}}</view>
					</view>
					
					<!-- <view class="l_box">
					<view>未提现(余额)</view>
					<view class="yu">{{userInfo.yu}}</view>
				</view> -->

				</view>
			</view>

			<view class="h_right">

				<view class="r_box tx" @click="$project.toPath('/pages/wx/tindex')">
					<image style="width:74rpx;" :src="imgRemote+'/assets/img/yu.png'" mode="widthFix"></image>
					<view>提现</view>
				</view>

				<view class="r_box mx " @click="$project.toPath('/pages/wx/mx')">
					<image style="width:73.5rpx;" :src="imgRemote+'/assets/img/mxs.png'" mode="widthFix"></image>
					<view>明细</view>
				</view>

			</view>

		</view>

       <!-- <view class="user_box" >基本资料</view> -->
          
         
		<view class="order-info" v-for="(item,index) in news" :key="index">
			<view class="my-order flex_left_right" @click="toDistribution(item)">
				<text class="">{{item.title}}</text>
				<text class="iconfont iconfanhui t-180 gray_font"></text>
			</view>
			<view class="order-statu flex_left_right">
				<view v-for="(items,indexs) in item.lm" :key="indexs" @click="to(item,items)">
					<view class="center">
						<image :src="items.image" mode="aspectFit"></image>
						<text v-if="items.num" class="to-be-paid">{{items.num}}</text>
					</view>
					<view class="fs-13 center name">{{items.title}}</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="layout">退出登录</view>

	</view>
</template>

<script>
	const app = getApp().globalData;
	const {
		imgRemote,
	} = app;
	export default {
		data() {
			return {
				imgRemote: imgRemote,
				userInfo: '',
				news: [{
						icon: '/static/img/distribution_3.png',
						name: '订单管理',
						url: '/pages/wx/lists'
					},
					{
						icon: '/static/img/distribution_3.png',
						name: '报事报修',
						url: '/pages/wx/blists'
					},
				],
				num: 0
			}
		},
		onShow() {
			this.getLm();
			this.getUser();
		},

		methods: {
			getUser() {
				this.$get(this.$api.wxUser, {
					token: uni.getStorageSync('wxToken')
				}, res => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.userInfo = data;
					}
				});
			},
			getLm() {
				this.$get(this.$api.wxLm, {
					token: uni.getStorageSync('wxToken')
				}, res => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.news = data;
					}
				});
			},
			layout() {
				this.$showModal('确认退出登录?', () => {
					uni.setStorageSync('wxToken', '');
					uni.switchTab({
						url: '/pages/tabar/user'
					});
				});
			},
			toDistribution(e) {
				uni.navigateTo({
					url: e.url
				})
			},
			to(e, es) {
				uni.navigateTo({
					url: e.url + '?status=' + es.can
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.index {
		box-sizing: border-box;
		padding: 25rpx;
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.h_left {
		background-color: #1C82D7;
		width: 70%;
		color: white;
		border-radius: 10rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 35rpx 0;
		height: 149px;
	}

	.l_box {
		width: 50%;
		text-align: center;
		margin-top: 25rpx;
	}

	.mt {
		margin-top: 20rpx;
	}

	.h_one {
		width: 100%;
		text-align: center;
		height: 100rpx;
	}

	.yu {
		font-size: 34rpx;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.h_right {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 149px;
	}

	.r_box {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
		padding: 9rpx 0;
		font-size: 28rpx;
		color: white;
		border-radius: 10rpx;
		height: 69px;
	}

	.tx {
		background-color: #F89F1F;
	}

	.mx {
		background-color: #07C8CF;
	}

	.btn {
		background-color: #F5230C;
		color: white;
		width: 100%;
		margin: 50rpx auto;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
	}


	.order-info {
		background: white;
		border-radius: 10rpx;
		margin: 30rpx 0rpx;
		padding: 0 30rpx 30rpx 30rpx;
		box-shadow: 3rpx 4rpx 6px rgba(0, 0, 0, 0.1);
	}

	.order-info .my-order {
		margin-top: 30rpx;
		height: 91.8rpx;
		line-height: 91.8rpx;
		border-bottom: 1px solid #eee;
	}

	.order-statu {

		flex-basis: 20%;
		margin-top: 10rpx;

		image {
			width: 60rpx;
			height: 60rpx;

		}

		.name {
			margin-top: -5rpx;
		}

		.to-be-paid {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			background: red;
			color: #fff;
			border-radius: 50%;
			margin: 4rpx 0 0 -15rpx;
			line-height: 30rpx;
			font-size: 22rpx;
			text-align: center;
		}

		.paid-red {
			background: red;
		}


		.scale {
			width: 50rpx;
		}
	}
	.user_box{
		width: 25%;
		text-align: center;
		margin-left: auto;
		margin-top: 20rpx;
		background-color: #E34305;
		color: white;
		box-sizing: border-box;
		padding:15rpx 0;
		border-radius: 35rpx;
		font-size: 26rpx;
	}
	.xian{
		width: 6rpx;
		height: 35rpx;
		background-color: #1C82D7;
		margin-right: 20rpx;
	}
	.bc{
		display: flex;
		align-items: center;
	}
	.u_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		color: #1C82D7;
	}
	.u_info{
		color: #5C5C5C;
		font-size: 26rpx;
	}
</style>